<template>
  <view
    style="
      background-image: url('https://7072-prod-6ge67ekha9fc55a1-1369779738.tcb.qcloud.la/paipan/bkg3.png');
    "
    class="page-bg"
  >
    <view class="wrapper">
      <LeftIndexTag msg="八字排盘" ref="info" />

      <view class="btn-router">
        <image
          src="/static/image/paipan/btn2.png"
          class="btn1"
          @click="toPage('/subPackages/paipan/EightGodView', '1')"
        ></image>
        <image
          src="/static/image/paipan/btn3.png"
          class="btn1"
          @click="toPage('/subPackages/paipan/EightTimeView', '2')"
        ></image>
      </view>

      <HomeView />
    </view>

    <uni-popup ref="popup" type="message">
      <uni-popup-message
        type="warn"
        message="请输入日期"
        :duration="2000"
      ></uni-popup-message>
    </uni-popup>
  </view>
</template>
<script>
import LeftIndexTag from "@/components/pai-pan/LeftIndexTag.vue";
import HomeView from "./HomeView.vue";
export default {
  data() {
    return {
      currentIndex: "0",
    };
  },
  components: {
    LeftIndexTag,
    HomeView,
  },
  methods: {
    toPage(url, id) {
      this.currentIndex = id;
      if (!this.$refs.info.form.birth) {
        this.$refs.popup.open();
        return;
      }
      this.$store.dispatch("setBirth", this.$refs.info.form.birth);
      this.$store.dispatch("setGender", this.$refs.info.form.gender);
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page-bg {
  height: 2580rpx;
  background-repeat: no-repeat;
  background-size: cover;
}
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }
}
.nav-wrap {
  padding: 0 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 18px;
  .active {
    color: hsla(160, 100%, 37%, 1);
  }
}
.wrapper {
  position: relative;
  top: 700rpx;
}
.btn-router {
  margin-top: 50rpx;
  display: flex;
  .btn1 {
    height: 112rpx;
  }
}
</style>
